<%--
  User: zhangteng
  Date: 2015/1/4 19:48
--%>
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <title>编辑商品</title>
    <%@include file="../../common/head.jsp" %>
    <style type="text/css">
        #preview{border:0 solid #000;overflow:hidden;}
        #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
    </style>
    <script type="text/javascript">
        function previewImage(file)
        {
            var MAXWIDTH  = 400;
            var MAXHEIGHT = 400;
            var div = document.getElementById('preview');
            if (file.files && file.files[0])
            {
                div.innerHTML ='<img id=imghead>';
                var img = document.getElementById('imghead');
                img.onload = function(){
                    var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                    img.width  =  rect.width;
                    img.height =  rect.height;
                    //                 img.style.marginLeft = rect.left+'px';
                    img.style.marginTop = rect.top+'px';
                }
                var reader = new FileReader();
                reader.onload = function(evt){img.src = evt.target.result;}
                reader.readAsDataURL(file.files[0]);
            }
            else //兼容IE
            {
                var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
                file.select();
                var src = document.selection.createRange().text;
                div.innerHTML = '<img id=imghead>';
                var img = document.getElementById('imghead');
                img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
                div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
            }
        }
        function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width:width, height:height};
            if( width>maxWidth || height>maxHeight )
            {
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;

                if( rateWidth > rateHeight )
                {
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else
                {
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }

            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }
    </script>
</head>

<body>
<%@include file="../../common/header.jsp" %>

<div class="main-container" id="main-container">
    <div class="main-container-inner">
        <a class="menu-toggler" id="menu-toggler" href="#">
            <span class="menu-text"></span>
        </a>

        <div class="sidebar" id="sidebar">
            <%@include file="../../common/sidebar.jsp" %>
            <%@include file="../../common/menu.jsp" %>
            <!-- /.nav-list -->
        </div>

        <div class="main-content">
            <div class="breadcrumbs" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li>
                        <i class="icon-home home-icon"></i>
                        <a href="#">音像商店管理系统</a>
                    </li>
                    <li>管理商品</li>
                    <li class="active">编辑商品</li>
                </ul>
                <!-- .breadcrumb -->
            </div>

            <div class="page-content">
                <div class="page-header">
                    <h1>
                        编辑商品
                    </h1>
                </div>
                <!-- /.page-header -->

                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <div class="row">
                            <div class="col-xs-12">
                                <form class="form-horizontal" role="form" method="post"
                                      action="${website}admin/product">
                                    <input type="hidden" name="_method" value="put" />
                                    <input type="hidden" name="id" value="${product.id}" />

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label no-padding-right"> 商品编号 </label>

                                        <div class="col-sm-9">
                                            ${product.id}
                                        </div>
                                    </div>

                                    <div class="space-4"></div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label no-padding-right"> 商品名称 </label>

                                        <div class="col-sm-9">
                                            <input type="text" placeholder="商品名称" class="col-xs-10 col-sm-5" name="name"
                                                   value="${product.name}" />&nbsp; &nbsp; &nbsp;
                                        </div>
                                    </div>

                                    <div class="space-4"></div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label no-padding-right"> 商品总数 </label>

                                        <div class="col-sm-9">
                                            <input type="text" placeholder="商品总数" class="col-xs-10 col-sm-5"
                                                   name="totalNum" value="${product.totalNum}" />&nbsp; &nbsp; &nbsp;
                                        </div>
                                    </div>

                                    <div class="space-4"></div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label no-padding-right"> 借出数量 </label>

                                        <div class="col-sm-9">
                                            <input type="text" placeholder="当前数量" class="col-xs-10 col-sm-5"
                                                   name="borrowedNum" value="${product.borrowedNum}" />&nbsp; &nbsp; &nbsp;
                                        </div>
                                    </div>

                                    <div class="space-4"></div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label no-padding-right"> 供应商 </label>

                                        <div class="col-sm-4">
                                            <select class="form-control" name="supplierId">
                                                <c:forEach var="supplier" items="${supplierList}">
                                                    <c:if test="${supplier.id == product.supplierId}">
                                                        <option value="${supplier.id}" selected="selected">${supplier.name}</option>
                                                    </c:if>
                                                    <c:if test="${supplier.id != product.supplierId}">
                                                        <option value="${supplier.id}">${supplier.name}</option>
                                                    </c:if>
                                                </c:forEach>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="space-4"></div>

                                    <div class="form-group">
                                        <label class="col-sm-3 control-label no-padding-right"> 商品描述 </label>

                                        <div class="col-sm-9">
                                            <textarea placeholder="请输入商品描述" class="col-sm-5" name="desc">${product.desc}</textarea>&nbsp; &nbsp; &nbsp;
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label no-padding-right"> 商品图片 </label>

                                        <div class="col-sm-9">
                                            <div id="preview">
                                                <img id="imghead" width=276 height=276 border=0 src='/resources/img/xzzm.jpg'/>
                                            </div>
                                            <input type="file" onchange="previewImage(this)" />
                                        </div>
                                    </div>

                                    <div class="clearfix form-actions">
                                        <div class="col-md-offset-3 col-md-9">
                                            <button class="btn btn-info" type="submit">
                                                <i class="icon-ok bigger-110"></i>
                                                保存
                                            </button>

                                            &nbsp; &nbsp; &nbsp;
                                            <button class="btn" type="reset">
                                                <i class="icon-undo bigger-110"></i>
                                                重置
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <!-- /row -->
                        <!-- PAGE CONTENT ENDS -->
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.page-content -->
        </div>
        <!-- /.main-content -->
    </div>
    <!-- /.main-container-inner -->

    <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
        <i class="icon-double-angle-up icon-only bigger-110"></i>
    </a>
</div>
<!-- /.main-container -->

<%@include file="../../common/footer.jsp"%>
<script type="text/javascript" src="/resources/js/jquery.validate.min.js"></script>
<script type="text/javascript">
    $(function ($) {
        $('form').validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: false,
            rules: {
                name: {
                    required: true
                },
                totalNum: {
                    required: true
                },
                curNum: {
                    required: true
                },
                supplierId: {
                    required: true
                }
            },

            messages: {
                name: {
                    required: "请输入商品名称"
                },
                totalNum: {
                    required: "请输入商品总数"
                },
                curNum: {
                    required: "请输入当前数量"
                },
                supplierId: {
                    required: "请输入供应商编号123"
                }
            },
            invalidHandler: function (event, validator) { //display error alert on form submit
                $('.alert-danger', $('.login-form')).show();
            },
            highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
            },
            success: function (e) {
                $(e).closest('.form-group').removeClass('has-error').addClass('has-info');
                $(e).remove();
            },
            errorPlacement: function (error, element) {
                error.insertAfter(element);
            },
            submitHandler: function (form) {
                form.submit();
            },
            invalidHandler: function (form) {
            }
        });
    });
</script>
</body>
</html>
